<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Css的选择器</title>
  <style>
    /*
    *号选择器，页面中所有的标签默认使用这个样式
    */
    *{
      font-size:20px;
    }
    /*
    标签选择器，直接写标签，页面中所有的标签都使用这个样式
    页面中的所有p标签都使用这个样式
    */
    p {
      font-size:12px;
    }
    li {
      color:red;
    }
    /*
    类选择器，也叫class选择器
    p.l1 表示网页中的所有class='l1'的p标签都使用这个样式
    *.l1表示网页中的所有class='l1'的标签
    */
    li.l1 {
      color:gray;
    }
    li.l2 {
      font-size:12px;
    }
    /*
    如果要为某个特定的标签写样式，此时要使用id选择器
    id原则上所有标签不能重复
    #p1表示找id为p1的标签，此处不用加标签 p#p1,因为默认id是不重复的
    */
    #p1 {
      color:blueviolet
    }
    #p2 {
      color:cadetblue
    }
    /*
    层级选择器
    ul li 表示网页中所有的ul中li标签都使用这个样式，这个选择器会根据第一级的类型来看
    这个选择的范围比普通选择器要小
    */
    #u1 li {
      font-size:60px;
    }
    ul.u2 li {
      font-size:50px;
    }
    /*
    单级选择器
    #p3 span表示id为p3标签中的所有span
    */
    #p3 span {
      color: brown;
    }
    /*表示id为p3中的第一级的span有这个样式*/
    #p3 > span {
      font-size:88px;
    }
  </style>
</head>
<body>
  <div id="p3">
    死去的旗袍美女诈尸还魂！<div>午夜诡花轿伸出苍白的鬼手！地下<span>车库</span>惊现一脸鲜血的美人头！</div>床下爬出神秘恐怖的暗影！无人的房间传来高跟鞋踏出的脚步声……逝者冤魂不散，附身于大学生美女，用梦境控制着惊惧的年轻人！怨灵异动，杀机四伏！魅影乍现，尖叫不断！
　　尸姐还魂，是为了向负心人复仇血恨？还是为了揭开神秘古旗中的魔咒？抑或是为了将<span>更多入</span>局者带入另一个世界？迷雾重重，荡过阴阳两界；鬼魅飘飘，逼出致命抉择！终极恐怖就在午夜楼梯，一步一颤栗，踏错一步，必然万劫不复，魂飞魄散！
  </div>
  <p class="l1" id="p2">这是五个段落</p>
  <p id="p1">这是五个段落</p>
  <p>这是五个段落</p>
  <p>这是五个段落</p>
  <p>这是五个段落</p>
  <a href="#">测试链接</a>
  <ul id="u1">
    <li class="l1">第一组列表01</li>
    <li class="l1">第一组列表02</li>
    <li class="l1">第一组列表03</li>
    <li class="l1">第一组列表04</li>
    <li class="l1">第一组列表05</li>
    <li class="l1">第一组列表06</li>
  </ul>
  <ul class="u2">
    <li class="l2">第二组列表01</li>
    <li class="l2">第二组列表02</li>
    <li class="l2">第二组列表03</li>
    <li class="l2">第二组列表04</li>
    <li class="l2">第二组列表05</li>
  </ul>

</body>
</html>